﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>全塑智联MES-品质看板</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<style>
    .boxall .list-info div.tit03 {
        line-height: 1rem;
        font-size: .4rem;
        height: 1rem;
    }
</style>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif" alt=""> 页面加载中...</div>
</div>
<!-- 固定Top组件 -->
<div class="head">
    <div>
        <h1 class="watchBoardTitle">品质看板</h1>
        <div id="showTime"
             style="text-indent: initial; text-align: right; font-size: .2rem; margin-right: 1rem ;"></div>
    </div>
</div>

<div style="display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;" class="mainbox">
    <div style="margin-top: .3rem;width: 26%; display: flex; flex-direction: column;">
        <div style="margin-bottom: .8rem; width: 8.2em; display: flex; flex-direction: column;">
            <div style="width: 5rem;" class="boxall">
                <div class="tit02">一周信息汇总</div>
                <div style="height: 20px;"></div>
                <div class="list-info" style="display: flex; flex-direction: row; flex-wrap: wrap;">
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>生产数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="weekProductionQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>良品数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="weekQualifiedQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>不良数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="weekUnQualifiedQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>不良率</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="unQualifiedRate">0%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: 8.2em; display: flex; flex-direction: column;">
            <div style="width: 5rem;" class="boxall">
                <div class="tit02">一月信息汇总</div>
                <div style="height: 20px;"></div>
                <div class="list-info" style="display: flex; flex-direction: row; flex-wrap: wrap;">
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>生产数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="monthProductionQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>良品数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="monthQualifiedQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>不良数量</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="monthUnQualifiedQuantity">0</span>
                        </div>
                    </div>
                    <div style="width: 50%;">
                        <div class="tit01 align-left">
                            <span>不良率</span>
                        </div>
                        <div class="tit03 align-left">
                            <span id="monthUnQualifiedRate">0%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-left: .5rem;width: 70%; display: flex; flex-direction: column;">
        <div id="weekBarPicture" style="margin-top: .05rem; width: 100%; height: 40%">
        </div>
        <div style="height: .90rem;"></div>
        <div id="monthBarPicture" style="width: 100%; height: 40%">
        </div>
    </div>
</div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/showTime.js"></script>
<script type="text/javascript" src="js/fullScreen.js"></script>
<script type="text/javascript" src="js/init_screen.js"></script>
<script type="text/javascript" src="js/utils.js"></script>

<script type="text/javascript">
    window.onload = async function () {
        // 调用数据接口
        await getQualityBoardData()
        // initEchartOptions()
        $(".loading").fadeOut();
    }

    async function getQualityBoardData() {
        let workingProcedureCode = GetQueryString('workingProcedureCode');
        let token = GetQueryString('token');
        await $.ajax({
            url: `/erupt-api/watchBoard/qualified?workingProcedureCode=${workingProcedureCode}`,
            // url: `/erupt-api/watchBoard/qualified?workingProcedureId=${workingProcedureCode}`,
            type: 'get',
            headers: {
                'Token': token
            },
            dataType: 'json',
            success: (res) => {
                initEchartOptions(res);
            },
            error: function (xhr, errorText, errorType) {
                alert(errorText)
            }
        });
    }

    function initEchartOptions(data) {
        console.log(data)
        if (data) {
            let weekUnQualifiedCheckItemDataList = [];
            let monthUnQualifiedCheckItemDataList = [];
            let weekUnQualifiedCheckItemList = [];
            let monthUnQualifiedCheckItemList = [];
            console.log('workingProcedureName: ', data.workingProcedureName)
            $('.watchBoardTitle').text(data.workingProcedureName + '品质看板');
            let weekProductionQuantity = 0
            let weekQualifiedQuantity = 0
            let weekUnQualifiedQuantity = 0
            let weekUnQualifiedRate = 0
            if (data.weekInfo) {
                weekProductionQuantity = data.weekInfo.productionQuantity || 0
                weekQualifiedQuantity = data.weekInfo.qualifiedQuantity || 0
                weekUnQualifiedQuantity = data.weekInfo.unQualifiedQuantity || 0
                weekUnQualifiedRate = data.weekInfo.unQualifiedRate || 0
            }
            $('#weekProductionQuantity').text(weekProductionQuantity)
            $('#weekQualifiedQuantity').text(weekQualifiedQuantity)
            $('#weekUnQualifiedQuantity').text(weekUnQualifiedQuantity)
            $('#unQualifiedRate').text(`${(Number(weekUnQualifiedRate) * 100).toFixed(2)}%`)

            let monthProductionQuantity = 0
            let monthQualifiedQuantity = 0
            let monthUnQualifiedQuantity = 0
            let monthUnQualifiedRate = 0
            if (data.monthInfo) {
                monthProductionQuantity = data.monthInfo.productionQuantity || 0
                monthQualifiedQuantity = data.monthInfo.qualifiedQuantity || 0
                monthUnQualifiedQuantity = data.monthInfo.unQualifiedQuantity || 0
                monthUnQualifiedRate = data.monthInfo.unQualifiedRate || 0
            }
            $('#monthProductionQuantity').text(monthProductionQuantity)
            $('#monthQualifiedQuantity').text(monthQualifiedQuantity)
            $('#monthUnQualifiedQuantity').text(monthUnQualifiedQuantity)
            $('#monthUnQualifiedRate').text(`${(Number(monthUnQualifiedRate) * 100).toFixed(2)}%`)

            weekUnQualifiedCheckItemDataList = data.weekUnQualifiedCheckItemDataList
            monthUnQualifiedCheckItemDataList = data.monthUnQualifiedCheckItemDataList
            weekUnQualifiedCheckItemList = data.weekUnQualifiedCheckItemList
            monthUnQualifiedCheckItemList = data.monthUnQualifiedCheckItemList
            const weekBarPicture = echarts.init(document.getElementById('weekBarPicture'));
            const monthBarPicture = echarts.init(document.getElementById('monthBarPicture'));
            let weekBarOption = {
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '7%',
                    containLabel: true
                },
                title: {
                    text: '一周TOP10 不良现象',
                    textStyle: {
                        color: '#fff',
                        fontSize: 30
                    },
                },
                /* 鼠标悬浮显示数据 */
                tooltip: {},
                legend: {
                    show: false
                },
                xAxis: {
                    data: weekUnQualifiedCheckItemList,
                    //设置轴线的属性
                    axisLine: {
                        lineStyle: {
                            color: '#6ab2ec',
                        },
                    },
                    axisLabel: {
                        fontSize: 30
                    }
                },
                yAxis: {
                    splitArea: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#85a6a9'],
                            width: 1,
                            type: 'dashed',
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#6ab2ec',
                        }
                    }
                },
                series: [{
                    name: '不良品数量',
                    type: 'bar',
                    data: weekUnQualifiedCheckItemDataList,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontSize: 30
                            }
                        }
                    },
                    itemStyle: {
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        color: '#5470c6',
                        borderColor: '#fff',
                        shadowColor: '#5470c6',
                        shadowBlur: 3
                    },
                    barWidth: '50%',
                }, {
                    data: weekUnQualifiedCheckItemDataList,/* 这里要和第一组数据一样、才能保持在最高处*/
                    type: 'line',
                    symbol: 'circle', //拐点样式
                    symbolSize: 12, //拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 3,//折线宽度
                                color: "#fff"//折线颜色
                            },
                            // color: '#27dba0',//拐点颜色
                            color: '#6ab2ec',//拐点颜色
                            borderColor: '#fff',//拐点边框颜色
                            borderWidth: 3//拐点边框大小
                        },
                        emphasis: {
                            color: '#4CCEFE'//hover拐点颜色定义
                        }
                    },
                }]
            };
            let monthBarOption = {
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '7%',
                    containLabel: true
                },
                title: {
                    text: '一月TOP10 不良现象',
                    textStyle: {
                        color: '#fff',
                        fontSize: 30
                    },
                },
                /* 鼠标悬浮显示数据 */
                tooltip: {},
                legend: {
                    show: false
                },
                xAxis: {
                    data: monthUnQualifiedCheckItemList,
                    //设置轴线的属性
                    axisLine: {
                        lineStyle: {
                            color: '#6ab2ec',
                        }
                    },
                    axisLabel: {
                        fontSize: 30
                    }
                },
                yAxis: {
                    splitArea: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#85a6a9'],
                            width: 1,
                            type: 'dashed',
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#6ab2ec',
                        }
                    }
                },
                series: [{
                    name: '不良品数量',
                    type: 'bar',
                    data: monthUnQualifiedCheckItemDataList,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#fff',
                                fontSize: 30
                            }
                        }
                    },
                    itemStyle: {
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        color: '#5470c6',
                        borderColor: '#fff',
                        shadowColor: '#5470c6',
                        shadowBlur: 3
                    },
                    barWidth: '50%',
                }, {
                    data: monthUnQualifiedCheckItemDataList,/* 这里要和第一组数据一样、才能保持在最高处*/
                    type: 'line',
                    symbol: 'circle', //拐点样式
                    symbolSize: 12, //拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 3,//折线宽度
                                color: "#fff"//折线颜色
                            },
                            // color: '#27dba0',//拐点颜色
                            color: '#6ab2ec',//拐点颜色
                            borderColor: '#fff',//拐点边框颜色
                            borderWidth: 3//拐点边框大小
                        },
                        emphasis: {
                            color: '#4CCEFE'//hover拐点颜色定义
                        }
                    },
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            weekBarPicture.setOption(weekBarOption);
            monthBarPicture.setOption(monthBarOption);
        }
    }
</script>
</body>
</html>